<template>
  <div class="table clearfix">
    <!-- 列表没数据时的背景图显示及分页 -->
    <div class="noDataDiv" v-if="productData.length === 0">
      <img class="clearfix noData" src="../assets/images/tableNoData.png" />
    </div>
    <div class="pages" v-if="total !== -1">
      <Page :total="total" :current="pages.page" show-sizer show-elevator @on-change="changePage" @on-page-size-change="pageSizeChange" />
      <!-- <Page v-if="pages  && total > 60" :total="total" :current="pages.page" show-sizer @on-change="changePage" show-elevator/> -->
      <div class="txtClass">显示1到{{ pages.rows }}，共{{ total }}条记录</div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {}
  },
  props: {
    total: Number,
    productData: Array,
    pages: Object,
  },
  created() {},
  mounted() {
    console.log(this.pages)
  },
  methods: {
    pageSizeChange(e) {
      // console.log(e)
      this.$emit('page-size-change', e)
    },
    changePage(e) {
      this.$emit('change-page', e)
    },
    getSelection(data) {
      this.$emit('onSelected', data)
    },
  },
}
</script>
<style scoped lang="less">
.table {
  height: 100%;
}
.pages {
  display: flex;
  justify-content: space-between;
  .txtClass {
    font-size: 14px;
    // font-family:PingFangSC-Regular,PingFang SC;
    font-weight: 400;
    color: rgba(82, 91, 109, 1);
    line-height: 32px;
  }
}
.noDataDiv {
  height: 340px;
}
</style>
